<template>
  <div class="space-y-2">
    <div v-if="todos.length === 0" class="text-gray-500 text-center py-8 border border-dashed border-gray-300 rounded-lg">
      <i class="fa fa-check-circle-o text-4xl mb-2 opacity-30"></i>
      <p>还没有任务，添加你的第一个任务吧！</p>
    </div>
    
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todo="todo"
      @toggle-todo="toggleTodo"
      @delete-todo="deleteTodo"
    />
  </div>
</template>

<script setup>
import { defineProps, emit } from 'vue';
import TodoItem from './TodoItem.vue';

// 定义接收的props
const props = defineProps({
  todos: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 定义发出的事件
const emit = defineEmits(['toggle-todo', 'delete-todo']);

// 处理任务状态切换
const toggleTodo = (id) => {
  emit('toggle-todo', id);
};

// 处理任务删除
const deleteTodo = (id) => {
  emit('delete-todo', id);
};
</script>
